<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <!-- 公共 -->
    <style>

    </style>
    <!-- 表单容器和内容 -->
    <style></style>
    <!-- 提示框样式 -->
    <style></style>
</head>

<body>
    <div class="container">
        <!-- 表单 -->
        <div class="form_wrap">
            <form action="">
                <div class="mb-3"></div>
                <div class="mb-3">
                    <label for="password" class="form-label">密码</label>
                    <input type="password" class="form-control password" name="" id="">
                </div>
                <button type="button" class="btn btn-primary btn-login">登录</button>
            </form>
        </div>
    </div>
    <script src="../js/axios.min.js"></script>
    <script>
        // 1.获取alter
        const alertCom = document.querySelector('.alert')

        // 2.抽取提示框方法
        function showAlert(msg, classname) {

        }

        // 3.给登录按钮绑定点击事件，提交输入的用户信息到服务器
        document.querySelector('.btn-login').addEventListener('click', function() {

            // 3.1 获取输入的用户名和蜜码
            const username = document.querySelector('.username').value
            const password = document.querySelector('.username').value //故意写错
                // 3.2 用户名 密码 长度判断
            if (username.trim().length < 8) {}
            if (password.trim().length < 6) {}


            // 3.3 通过axios提交到服务器 并 提示用户 成功 / 失败
            axios({
                url: 'http://hmajax.itheima.net/api/login',
                method: 'post',
                data: {
                    username,
                    password
                }
            }).then(res => {
                // 显示提示框
                showAlert(res.data.message, 'alert-success')
            }).catch(err => {
                // 显示警示框
                showAlert(err.response.data.message, 'alert-danger')
            })
        })
    </script>
</body>

</html>